.blockly-container
  z-index: 4

  .blocklyTreeLabel
    font-size: 12px
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace

  .blocklySvg
    background-color: rgba(31, 31, 31, 0.1)

  .blocklyScrollbarHandle
    fill: #555

  .blocklyScrollbarBackground:hover + .blocklyScrollbarHandle, .blocklyScrollbarHandle:hover
    fill: #111

  // Not using zoom anyway
  // .blocklyZoom > image, image.zoomToFit
  //   opacity: .6
  //
  // .blocklyZoom > image:hover, image.zoomToFit:hover
  //   opacity: .9
  //
  // .blocklyZoom > image:active, image.zoomToFit:active
  //   opacity: 1.0
  //
  // @media screen and (max-width: 1376px)
  //   .blocklyZoom, image.zoomToFit
  //     // Hide these on narrow screens to avoid overlapping code
  //     display: none

  .blocklyToolboxDiv
    //max-width: 150px  // Don't get too wide with long method names
    max-width: 0  // Just hide it, continuous flyout makes it unnecessary

  .blocklyMainBackground
    stroke-width: 0

  .injectionDiv.coco-dark-theme
    .comment-block
      font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif
      font-size: 12px

  .blocklyDropdownRect
    fill: rgba(33, 88, 233, 0.75)

  &.static-toolbox-dropdowns .blocklyFlyout
    .blocklyEditableText:nth-child(3)
      // This prevents clicks on dropdown elements like "up" or "right" from going through.
      // We do this in early levels where we provide four go blocks, one for each direction.
      // We don't want players to mess around changing dropdwon arguments in toolbox, only workspace.
      // :nth-child(3) happens to be the direction argument (so we don't apply to steps argument)
      pointer-events: none

      image:last-child
        // Hide the dropdown arrow next to the block label
        display: none

      .blocklyDropdownText, image[*|href*="/images/level/blocks/block"]
        // Move the text over to center it, now that the dropdown arrow on the right is gone
        transform: translateX(10px)

  .highlighted-block
    & > path:first-child
      fill: rgba(250, 248, 243, 1) !important
      stroke: #0099FF !important
      stroke-width: 2px !important

    & > g > text.blocklyText
      text-shadow: 0 2px black, 0 -2px black, 2px 0 black, -2px 0 black

